<template>
  <div>
    <!-- 地图 -->
    <div class="header_box_content">
      <div id="container" style="min-height: 1050px; width: 100%"></div>
      <div class="fullScreen" @click="handleBack">返回首页</div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive, ref, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
// import { citys } from "./citys.js";
import api from "../../api/api";
var projectId;
var map, createInfoWindow, marker;
export default {
  name: "dashboard",
  components: {},
  setup() {
    var map = new AMap.Map("container", {
      zoom: 4,
    });

    //just some colors
    var colors = [
      "#0cc2f2",
      "#4fd2b1",
      "#90e36f",
      "#ffe700",
      "#ff9e00",
      "#ff6700",
      "#ff1800",
    ];

    AMapUI.load(
      ["ui/misc/PointSimplifier", "lib/$"],
      function (PointSimplifier, $) {
        if (!PointSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }

        var pointSimplifierIns = new PointSimplifier({
          zIndex: 115,
          autoSetFitView: false,
          map: map, //所属的地图实例

          getPosition: function (item) {
            if (!item) {
              return null;
            }

            var parts = item.split(",");

            return [parseFloat(parts[0]), parseFloat(parts[1])];
          },
          getHoverTitle: function (dataItem, idx) {
            return "序号: " + idx;
          },
          //使用GroupStyleRender
          renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
          renderOptions: {
            eventSupport: false, //禁止事件,对性能更友好
            //点的样式
            pointStyle: {
              fillStyle: null,
              width: 15,
              height: 15,
            },
            topNAreaStyle: null,
            getGroupId: function (item, idx) {
              //随机返回一个组ID
              return Math.ceil(colors.length * Math.random());
            },
            groupStyleOptions: function (gid) {
              //随机设置大小
              var radius = 2 + 10 * Math.random();

              return {
                pointStyle:
                  radius > 0
                    ? {
                        content: function (ctx, x, y, width, height) {
                          var p = {
                            x: x + width / 2,
                            y: y + height / 2,
                            radius: radius,
                          };

                          ctx.beginPath();
                          var gradient = ctx.createRadialGradient(
                            p.x,
                            p.y,
                            0,
                            p.x,
                            p.y,
                            p.radius
                          );
                          gradient.addColorStop(0, "rgba(7,120,249,0.8)");
                          gradient.addColorStop(1, "rgba(7,120,249,0.1)");
                          ctx.fillStyle = gradient;
                          ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
                          ctx.fill();
                        },

                        //fillStyle: colors[gid % colors.length],
                        width: radius * 2,
                        height: radius * 2,
                      }
                    : null,
                pointHardcoreStyle: {
                  width: radius * 2 + 3,
                  height: radius * 2 + 3,
                },
              };
            },
          },
        });

        //重复render
        setInterval(function () {
          pointSimplifierIns.render();
        }, 500);

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(
          document.body
        );
        $.get("https://a.amap.com/amap-ui/static/data/10w.txt", function (csv) {
          var data = csv.split("\n");

          pointSimplifierIns.setData(data.slice(0, 5000));

          $("#loadingTip").remove();
        });
      }
    );
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/common.css";
.monitor {
  position: absolute;
  background: #2c2d40de;
  color: #fff;
}
.header_box_content {
  top: 0;
}
.panel .inner {
  width:100%;
  padding: 0.3rem 0;
}
.header_box_content div {
  margin-left: 0;
}
&:deep(.amap-info-content) {
  background: #4e546aec !important;
}
#container {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#loadingTip {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 0;
  padding: 3px 10px;
  background: red;
  color: #fff;
  font-size: 13px;
}
</style>
